<template>
  <div class="container">
    <!-- 预览 -->
    <el-card v-if="isPreview" body-style="padding:0px 16px 20px">
      <div slot="header">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <span style="font-weight:700">试卷名称：{{ list.paper_name }}</span>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-button type="primary" plain size="small" @click="isPreview=false">返回列表</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <PaperPreview :preview-list="list" />
    </el-card>
    <!-- 新增 -->
    <el-card v-else-if="isAdd" body-style="padding:0px 16px 20px">
      <div slot="header">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col>
            <span style="font-weight:700">{{ editList.subject_id?'修改试卷':'新增试卷' }}</span>
          </el-col>
          <el-col>
            <el-row type="flex" justify="end">
              <el-button type="primary" plain size="small" @click="backList">返回列表</el-button>
            </el-row>
          </el-col>
        </el-row>
      </div>
      <AddPaper ref="edit-page" :edit-list="editList" @backParperList="backList" />
    </el-card>
    <el-card v-else body-style="padding:0px 16px">
      <el-row type="flex" justify="end">
        <el-button type="primary" plain style="margin:16px" size="small" @click="isAdd=true">创建考试</el-button>
      </el-row>
      <PaperList @show="PaperPreviewPage" @edit="editPageFn" />
    </el-card>
    <!-- --------------------------------------------------------------------------------------- -->
  </div>
</template>
<script>

export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      isAdd: false,
      isPreview: false,
      list: [],
      editList: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    PaperPreviewPage(val) {
      this.isPreview = true
      // const question_list = JSON.parse(val.check_question_list)
      // console.log(question_list)
      this.list = { ...val, check_question_list: val.check_question_list,
        quest_type: val.quest_type.split(),
        question_list: val.question_list.split()
      }
      console.log(this.list)
    },
    editPageFn(val) {
      this.isAdd = true
      this.editList = val
      console.log(val)
      // 数据渲染异步的,此时还获取不到
      this.$nextTick(() => {
        this.$refs['edit-page'].editPage()
        console.log(this.$refs['edit-page'])
      })
    },
    backList() {
      this.isAdd = false
      this.editList = []
    }
  }
}
</script>
<style  lang='scss' scoped>
.container{
  margin: 20px;
}
.el-card__body{
  padding: 0 16px;
}
::v-deep .el-card__header{
padding: 10px;
margin: 0px 0 20px;
}
</style>
